import {Button, Form, Input, message, Modal} from 'antd'
import {spawn} from 'child_process';
import React, {Component} from 'react'
import "./index.less"
import {FormInstance} from "antd/es/form";
import {AxioInstance} from "../../api/AxiosHelper";
import {UPDATE_USER_PASSWORD} from "../../api/APIURLDefine";

export default class index extends Component<any, any> {

    constructor(props) {
        super(props);
        this.state = {}
    }

    form: FormInstance = null;

    render() {
        return (
            <Modal visible={this.props.visible}
                   title={this.props.title}
                   destroyOnClose={true}
                   maskClosable={false}
                  width={"5.2rem"}
                   className="modalUpdate"
                   footer={<div style={{
                       width: "100%", height: "100%", display: "grid",
                       placeItems: "center"
                   }}>
                       <Button
                           onClick={() => {
                               this.form?.submit();
                           }}
                           style={{
                               backgroundColor: '#71D3DE',
                               color: '#ffffff',
                               width: '0.9rem',
                               outline: 'none',
                               borderRadius: '0.1rem'
                           }}
                       >
                           确定
                       </Button></div>}
                   onCancel={this.props.closeModel}
                   bodyStyle={{
                       //backgroundSize: "100% 100%",
                    //    width: '100%',
                       height: "3.89rem",
                       
                       paddingLeft: '8%',
                        paddingRight: '8%'

                   }}
            >
                <Form
                    ref={(ref) => this.form = ref}
                    className='modalUpdateForm'
                    onFinish={(values: any) => {
                        if (this.props.title === '修改密码') {
                            const oldPass = values.password;
                            const pass = values.newPassword;
                            const confirm = values.confirmPassword;
                            if (pass === confirm) {
                                //提交修改密码
                                let formData = new FormData();
                                formData.append("oldPwd", oldPass);
                                formData.append("newPwd", pass);
                                AxioInstance.post(UPDATE_USER_PASSWORD, formData).then((msg) => {
                                    // console.log(msg);
                                    message.success('修改成功');
                                    this.props.closeModel();
                                }).catch((e) => {console.error(e);message.error(e.msg)});
                                // console.log(values)
                            } else {
                                message.error("两次输入的密码不一致");
                                this.form.setFieldsValue({"newPassword": "", "confirmPassword": ""})
                            }
                        }
                    }}
                >
                    {
                        this.props.title === '修改密码' ? <>
                            <Form.Item  label={'密码'} labelCol={{span: 8}} style={{width:"3.25rem",flexFlow: 'nowrap'}}
                                       labelAlign={"left"} name='password'><Input.Password
                                style={{width: '3.2rem'}}/></Form.Item>
                            <Form.Item label={'新密码'} labelCol={{span: 8}} style={{width:"3.25rem", flexFlow: 'nowrap'}}
                                       labelAlign={"left"} name='newPassword'><Input.Password
                                style={{width: '3.2rem'}}/></Form.Item>
                            <Form.Item  label={'确认密码'} labelCol={{span: 8}}
                                       style={{width:"3.25rem", flexFlow: 'nowrap'}} labelAlign={"left"}
                                       name='confirmPassword'><Input.Password
                                style={{width: '3.2rem'}}/></Form.Item></> : null
                    }
                    {/* {
                        this.props.title === '绑定邮箱' ? <>
                            <Form.Item label={'邮箱'} labelCol={{span: 8}} style={{width: "3.25rem", flexFlow: 'nowrap'}}
                                       labelAlign={"left"} name='email'><Input placeholder={"请输入当前的邮箱地址"}
                                                                               style={{width: '3.2rem'}}/></Form.Item>
                            <Form.Item label={'验证码'} labelCol={{span: 8}} style={{width: "3.25rem", flexFlow: 'nowrap'}}
                                       labelAlign={"left"} name='verificationCode'><Input placeholder={"请输入验证码"}
                                                                                          style={{width: '2rem'}}/></Form.Item>
                        </> : null
                    }
                    {
                        this.props.title === '绑定手机' ? <>
                            <Form.Item label={'手机号'} name='cell-phoneNumber'><Input placeholder="请输入手机号码"
                                                                                    style={{width: '3.2rem'}}/></Form.Item>
                            <Form.Item label={'验证码'} name='verificationCode'><Input
                                style={{width: '1.14rem', height: '0.39rem'}}/>
                                <button
                                    id="code"
                                    type={"button"}
                                    className="update-code-btn"
                                >
                                    获取验证码
                                </button>
                            </Form.Item></> : null
                    }
                    {
                        this.props.title === '修改手机' ? <>
                            <Form.Item label={'手机号码'} name='cell-phoneNumber'><Input placeholder="请输入手机号码"
                                                                                     style={{width: '3.2rem'}}/></Form.Item>
                            <Form.Item label={'验证码'} name='verificationCode'><Input style={{width: '1.14rem'}}/>
                                <button
                                    id="code"
                                    type={"button"}
                                    className="update-code-btn"
                                >
                                    获取验证码
                                </button>
                            </Form.Item>
                            <Form.Item label={'新的电话号码'} name='newCell-phoneNumber'><Input placeholder='请输入新手机号码'
                                                                                          style={{width: '3.2rem'}}/></Form.Item></> : null
                    }*/}
                </Form>
            </Modal>
        )
    }
}
